<template>
  <q-dialog class="my_dialog" v-model="isFlagShow">
    <q-card class="my-card">
      <q-toolbar class="row items-center my_form_header">
        <div>
          {{dlgTitle}}
        </div>
        <q-space />
        <q-btn flat round dense icon="mdi-close" @click="close"/>
      </q-toolbar>
      <q-separator />
      <q-card-setion class="q-mx-sm">
        <q-scroll-area class="my-form-container">
          <table class="my_form_table">
            <tr class="my_row_height">
              <td class="my_label"><span style="color: red">**</span>设备名称：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  v-model="param.cname"
                  @blur="v$.cname.$touch()"
                  :error="v$.cname.$error"
                  error-message="请输入不少于2个字符！"
                />
              </td>
              <td class="my_label"><span style="color: red">**</span>应用类型：</td>
              <td class="my_value">
                <q-select
                  dense
                  outlined
                  options-dense
                  :options="fieldTypeArr"
                  v-model="param.type"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  @blur="v$.type.$touch()"
                  :error="v$.type.$error"
                  error-message="请选择设备类型！"
                />
              </td>
            </tr>
            <tr class="my_row_height">
              <td class="my_label"><span style="color: red">**</span>设备状态：</td>
              <td class="my_value">
                <q-select
                  dense
                  outlined
                  options-dense
                  :options="statusTypeArr"
                  v-model="param.status"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  @blur="v$.status.$touch()"
                  :error="v$.status.$error"
                  error-message="请选择状态！"
                />
              </td>
              <td class="my_label"><span style="color: red">**</span>设备序码：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  v-model="param.sortCode"
                  @blur="v$.sortCode.$touch()"
                  :error="v$.sortCode.$error"
                  error-message="请输入不少于2个字符！"
                />
              </td>
            </tr>
            <tr class="my_row_height">
              <td class="my_label">DI数量：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.diNum"
                />
              </td>
              <td class="my_label">DI起始地址：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.diAddr"
                />
              </td>
            </tr>
            <tr class="my_row_height">
              <td class="my_label">AI数量：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.aiNum"
                />
              </td>
              <td class="my_label">AI起始地址：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.aiAddr"
                />
              </td>
            </tr>
            <tr class="my_row_height">
              <td class="my_label">DO数量：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.doNum"
                />
              </td>
              <td class="my_label">DO起始地址：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.doAddr"
                />
              </td>
            </tr>
            <tr class="my_row_height">
              <td class="my_label">AO数量：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.aiNum"
                />
              </td>
              <td class="my_label">AO起始地址：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.aiAddr"
                />
              </td>
            </tr>
            <tr class="my_row_height">
              <td class="my_label">MDV数量：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.mdvNum"
                />
              </td>
              <td class="my_label">MDV起始地址：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.mdvAddr"
                />
              </td>
            </tr>
            <tr class="my_row_height">
              <td class="my_label">MAV数量：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.mavNum"
                />
              </td>
              <td class="my_label">MAV起始地址：</td>
              <td class="my_value">
                <q-input
                  outlined
                  dense
                  type="number"
                  v-model.number.lazy="param.mavAddr"
                />
              </td>
            </tr>
          </table>
        </q-scroll-area>
      </q-card-setion>
      <q-separator />
      <div class="q-gutter-sm my_form_footer">
        <q-btn
          unelevated
          dense
          label="提交"
          type="submit"
          color="teal-3"
          @click="onSubmit"
          style="width: 80px"
        />
        <q-btn
          unelevated
          dense
          label="重置"
          type="reset"
          color="orange-3"
          @click="onReset"
          style="width: 80px"
        />
      </div>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, ref, toRef, toRefs, PropType, watch } from 'vue';
import { isObjectEmpty } from '../../../util/utils';
import { required, minLength } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core';
import { cataItem } from '../../../hook/common/useCatalogType';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';

const AmyIconSelect = defineAsyncComponent(() => import('components/basic/AmyIconSelect.vue'));
import { HmiDevItem, HmiDevItemVO } from './HmiDevModel';

export default defineComponent({
  cname: 'DevDlg',
  components: {
    AmyIconSelect
  },
  props: {
    itemData: {
      type: Object as PropType<HmiDevItem>,
      required: true
    },

    statusTypeArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    },

    fieldTypeArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    }
  },
  emits: ['submit-device-type', 'cancel-device-type'],
  setup (props, context) {
    //数据解构
    const {
      itemData,
      statusTypeArr,
      fieldTypeArr
    } = toRefs(props);

    //*******************************
    //      目录操作
    //*******************************
    const {
      findCatalogLabel,
      findCatalogId
    } = useCatalogTool();

    //*******************************
    //      表单项
    //*******************************
    //窗口显示
    let isFlagShow = ref(false);

    //窗口标题
    let dlgTitle = ref('');

    //界面数据
    let param = ref<HmiDevItemVO>({
      id: 0,
      type: '',
      cname: '',
      status: '',
      diNum: 0,
      aiNum: 0,
      doNum: 0,
      aoNum: 0,
      mdvNum: 0,
      mavNum: 0,
      diAddr: 0,
      aiAddr: 0,
      doAddr: 0,
      aoAddr: 0,
      mdvAddr: 0,
      mavAddr: 0,
      sortCode: '',
      description: ''
    });


    //关闭窗口
    const close = () => {
      isFlagShow.value = false;
      context.emit('cancel-device-type');
    }

    //显示窗口
    const show = (text: string) => {
      isFlagShow.value = true;
      dlgTitle.value = text;
    }

    //提交窗口
    const onSubmit = () => {
      v$.value.$validate();
      if (v$.value.$error) {
        alert('输入参数校验错误!');
      } else {
        isFlagShow.value = false;
        let item: HmiDevItem = {
          id: param.value.id,
          typeId: findCatalogId(fieldTypeArr.value, param.value.type),
          cname: param.value.cname,
          statusId: findCatalogId(statusTypeArr.value, param.value.status),
          diNum: param.value.diNum,
          aiNum: param.value.aiNum,
          doNum: param.value.doNum,
          aoNum: param.value.aoNum,
          mdvNum: param.value.mdvNum,
          mavNum: param.value.mavNum,
          diAddr: param.value.diAddr,
          aiAddr: param.value.aiAddr,
          doAddr: param.value.doAddr,
          aoAddr: param.value.aoAddr,
          mdvAddr: param.value.mdvAddr,
          mavAddr: param.value.mavAddr,
          sortCode: param.value.sortCode,
          description: param.value.description,
          createTime: '',
          createUserId: 0,
          updateTime: '',
          updateUserId: 0
        };

        //发送数据
        context.emit('submit-device-type', item);
      }
    }

    //重置
    const onReset = () => {
      if (param.value) {
        param.value.cname = '';
        param.value.type = '';
        param.value.status = '';
        param.value.diNum = 0;
        param.value.aiNum = 0;
        param.value.doNum = 0;
        param.value.aoNum = 0;
        param.value.mdvNum = 0;
        param.value.mavNum = 0;
        param.value.diAddr = 0;
        param.value.aiAddr = 0;
        param.value.doAddr = 0;
        param.value.aoAddr = 0;
        param.value.mdvAddr = 0;
        param.value.mavAddr = 0;
        param.value.sortCode = '';
        param.value.description = '';
      }

      //表单验证初始化
      v$.value.$reset();
    }

    //*******************************
    //      表单校验
    //*******************************
    //配置校验规则
    const rules = {
      id: {},
      type: { required },
      cname: { required, minLength: minLength(2) },
      status: { required },
      diNum: {},
      aiNum: {},
      doNum: {},
      aoNum: {},
      mdvNum: {},
      mavNum: {},
      diAddr: {},
      aiAddr: {},
      doAddr: {},
      aoAddr: {},
      mdvAddr: {},
      mavAddr: {},
      sortCode: { required },
      description: {}
    }

    //使用vuelidate，建立变量对应的校验规则
    const v$ = useVuelidate(rules, {
      id: toRef(param.value, 'id'),
      type: toRef(param.value, 'type'),
      cname: toRef(param.value, 'cname'),
      status: toRef(param.value, 'status'),
      diNum: toRef(param.value, 'diNum'),
      aiNum: toRef(param.value, 'aiNum'),
      doNum: toRef(param.value, 'doNum'),
      aoNum: toRef(param.value, 'aoNum'),
      mdvNum: toRef(param.value, 'mdvNum'),
      mavNum: toRef(param.value, 'mavNum'),
      diAddr: toRef(param.value, 'diAddr'),
      aiAddr: toRef(param.value, 'aiAddr'),
      doAddr: toRef(param.value, 'doAddr'),
      aoAddr: toRef(param.value, 'aoAddr'),
      mdvAddr: toRef(param.value, 'mdvAddr'),
      mavAddr: toRef(param.value, 'mavAddr'),
      sortCode: toRef(param.value, 'sortCode'),
      description: toRef(param.value, 'description')
    });


    //*******************************
    //      启动模块
    //*******************************
    //初始化
    const init = () => {
      if (!isObjectEmpty(itemData.value)) {
        param.value.id = itemData.value.id;
        param.value.type = findCatalogLabel(fieldTypeArr.value, itemData.value.typeId);
        param.value.cname = itemData.value.cname;
        param.value.status = findCatalogLabel(statusTypeArr.value, itemData.value.statusId);
        param.value.diNum = itemData.value.diNum;
        param.value.aiNum = itemData.value.aiNum;
        param.value.doNum = itemData.value.doNum;
        param.value.aoNum = itemData.value.aoNum;
        param.value.mdvNum = itemData.value.mdvNum;
        param.value.mavNum = itemData.value.mavNum;
        param.value.diAddr = itemData.value.diAddr;
        param.value.aiAddr = itemData.value.aiAddr;
        param.value.doAddr = itemData.value.doAddr;
        param.value.aoAddr = itemData.value.aoAddr;
        param.value.mdvAddr = itemData.value.mdvAddr;
        param.value.mavAddr = itemData.value.mavAddr;
        param.value.sortCode = itemData.value.sortCode;
        param.value.description = itemData.value.description;
      }

      //表单验证初始化
      v$.value.$reset();
    }

    //监听对象的所有属性
    watch(() => props.itemData, () => {
      init();
    }, { deep: true });

    //启动挂载组件
    onMounted(() => {
      init();
    })

    return {
      itemData,
      statusTypeArr,
      fieldTypeArr,

      isFlagShow,
      dlgTitle,
      param,
      init,
      close,
      show,
      onSubmit,
      onReset,
      v$
    }
  }
})
</script>

<style lang="scss" scoped>
.my-card {
  alignment: center;
  width: 800px;
  max-width: 900px;
  .my-form-container {
    text-align: center;
    padding: 5px 50px 5px 50px;
    height: 450px;
  }
}
</style>
